const path = require('path')

const {
  override,
  addWebpackAlias,
  addPostcssPlugins,
} = require('customize-cra')
const px2viewport = require('postcss-px-to-viewport')

const postcssPlugins = (module.exports = override(
  // 路径别名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    '@c': path.resolve(__dirname, 'src/components'),
    '@views': path.resolve(__dirname, 'src/views'),
    '@utils': path.resolve('src/utils'),
    '@styles': path.resolve('src/styles'),
  }),
  // 配置 PostCSS 样式转换插件
  addPostcssPlugins([
    // 移动端布局 viewport 适配方案
    px2viewport({
      // 视口宽度：可以设置为设计稿的宽度
      viewportWidth: 375,
      // 白名单：不需对其中的 px 单位转成 vw 的样式类类名
      // selectorBlackList: ['.ignore', '.hairlines']
    }),
  ])
))